<!--引入公共的模板-->
{{extend './layout.html'}}
{{block 'content'}}
    <div class="container">
        <h3 class="mt-5">用户设置</h3>
        <!--    
            enctype 的三个属性值
            
            1.application/x-www-form-urlencoded 默认值，上传用户名和密码 QueryString name=zhang&age=18
            2.multipart/form-data  上传文件,转换成二进制才能上传
            3.text/plain：上传纯文本  传输，空格转换成+，但不将non-ASCII字符编码为%ASCII HEX. 现在主要应用于发送json数据到服务端
        -->

        <form class="mt-5 mb-3" action="/api/upload" method="post" enctype="multipart/form-data">
            <!-- 隐藏的表单input -->
            <input type="hidden" name="hiddenUsername" value="{{ username }}"/>
            <div class="mb-3">
                <label for="loginName" class="form-label" id="img">修改头像 ：<img src="img/user.png" alt="user"> 新增的头像：</label>
                <input type="file" class="form-control" name="avatar" id="file"/>
            </div>
            <div class="mb-3">
                <label for="loginName" class="form-label" id="showNickname">昵称 </label>
                <input type="text" class="form-control"  placeholder="修改昵称" id="nickname" name="nickname"/>
            </div>
            <div class="mb-3">
                <label for="loginPwd" class="form-label">改密码</label>
                <input type="text" class="form-control"  placeholder="旧密码" id="oldPassword" name="oldPassword"/>
                <input type="text" class="form-control"  placeholder="新密码" id="newPassword" name="newPassword"/>
            </div>
            <div class="mb-3">
                <input type="submit" class="form-control btn-primary" id="dr" value="提交" >
            </div>
        </form>
    </div>

    <script>
        // 实现上传图片,在本地展示上传图片缩略图    
        // js API  有2个    
        // 1.FileReader    2.URL
    
        var file = document.getElementById('file');
        var img = new Image();
        file.onchange = function(){
            //1.FileReader
            // var reader = new FileReader();
            // reader.readAsDataURL(this.files[0]);
            // reader.onload = function(){
            //     var path = this.result;
            //     var img = new Image();
            //     img.width = 32;
            //     img.height = 32;
            //     img.src = path;
            //     document.getElementById('img').appendChild(img);                
            // }
            // reader.onerror = function(){
            //     console.log('读取失败');
            //     console.log(reader.error);
            // }

            // 2.URL

            // // console.log(121212);
            // // console.log(this.files);  // FileList
            // // console.log(this.files[0]);  // FileList
            var path = window.URL.createObjectURL(this.files[0]);
            // // console.log(path);
            img.width = 32;
            img.height = 32;
            img.src = path;
            document.getElementById('img').appendChild(img);
        } 
        
        // 获取当前登录的用户名
        // var user = JSON.parse(localStorage.getItem('user'));
        // if (user) {
        //     document.getElementById('hiddenUsername').value = user.username;
        //     document.getElementById('showNickname').innerHTML = "昵称 ：" + user.nickname;
        // }
    </script>
{{/block}}

